<script setup lang="ts">
import MpHtml from 'mp-html/src/uni-app/components/mp-html/mp-html.vue'
import { fetchProjectDetailAPI } from '@/apis/fetchProjectDetail'
import useHomeBarHeight from '@/composables/homeBarHeight'
import { useUserInfoStore } from '@/store/userInfo'
import { useGeneralDataStore } from '@/store/generalData'
import dialogIcon from '@/static/images/phone_colorful.png'

const generalDataStore = useGeneralDataStore()
const homeBarHeight = useHomeBarHeight()
const userInfoStore = useUserInfoStore()

const loading = ref(false)
const detail = ref<Project | null>(null)

const isShowDialog = ref(false)

onLoad(async (options) => {
  if (options && options.id) {
    loading.value = true
    const res = await fetchProjectDetailAPI({ id: options.id }, userInfoStore.userInfo!.token!)
    if (res.data?.code === 1) {
      detail.value = res.data.data
      loading.value = false
    }
    else {
      uni.showToast({ title: res.data?.msg, icon: 'none' })
      loading.value = false
    }
  }
})

function handleCall() {
  isShowDialog.value = false
  uni.makePhoneCall({
    phoneNumber: generalDataStore.generalData?.mobile || '',
    fail: () => { uni.showToast({ title: '取消呼叫', icon: 'none' }) },
  })
}

function handleContact() {}
</script>

<template>
  <!-- 顶部图 START -->
  <view class="absolute left-0 top-0">
    <uv-image width="750rpx" height="750rpx" :src="withDomain(detail?.image || '')">
      <template #loading>
        <uv-loading-icon color="#666666" />
      </template>
    </uv-image>
  </view>
  <!-- 顶部图 END -->
  <Spacer height="710" />
  <!-- 名称卡片 START -->
  <view class="relative flex flex-col rounded-20rpx from-#4999F7 to-#77DAFE bg-gradient-to-br p-40rpx">
    <view class="text-36rpx text-white font-semibold leading-50rpx">
      {{ detail?.title }}
    </view>
    <Spacer width="4" />
    <view class="text-52rpx text-white font-medium leading-60rpx">
      ¥{{ detail?.price }}
    </view>
    <image
      class="absolute bottom-14rpx right-20rpx h-109rpx w-99rpx"
      src="@/static/images/logo_white.png"
    />
  </view>
  <!-- 名称卡片 START -->
  <Spacer height="24" />
  <!-- 项目详情卡片 START -->
  <view class="rounded-20rpx bg-white px-24rpx">
    <Spacer height="34" />
    <Title>项目详情</Title>
    <Spacer height="24" />
    <MpHtml :content="detail?.content || '未知'" />
    <Spacer height="32" />
  </view>
  <!-- 项目详情卡片 END -->
  <Spacer height="240" />
  <view
    class="fixed bottom-0 w-750rpx flex items-center justify-between bg-white px-24rpx pt-20rpx x-center"
    :style="{ paddingBottom: `${homeBarHeight}px` }"
  >
    <button open-type="contact" class="h-96rpx w-146rpx flex flex-col items-center justify-center rounded-full bg-#DBEBFE" @contact="handleContact">
      <image class="h-36rpx w-34rpx" src="@/static/images/service.png" />
      <view class="text-24rpx text-#333333 leading-32rpx">
        在线客服
      </view>
    </button>
    <button class="h-96rpx w-532rpx flex items-center justify-center rounded-full bg-#4999F7" @tap="isShowDialog = true">
      <image class="h-32rpx w-36rpx" src="@/static/images/phone_white.png" />
      <Spacer width="12" />
      <view class="text-28rpx text-white leading-40rpx">
        联系平台
      </view>
    </button>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
  <uv-overlay :show="isShowDialog" @tap="isShowDialog = false">
    <uv-transition mode="zoom-in" :show="isShowDialog">
      <view class="relative h-screen w-screen">
        <Dialog :icon="dialogIcon" title="请拨打售后客服电话" confirm-label="立即拨打" @cancel="isShowDialog = false" @confirm="handleCall">
          <template #content>
            <view class="text-60rpx text-#333333 leading-84rpx">
              {{ generalDataStore.generalData?.mobile }}
            </view>
          </template>
        </Dialog>
      </view>
    </uv-transition>
  </uv-overlay>
</template>

<route lang="yaml">
name: 'projectDetail'
style:
  navigationBarTitleText: '项目详情'
</route>
